<template>
  <view
    class="ui-cell"
    :class="[ customclass ,{ 'ui-cell__link': clickable || isLink }]"
    @click="jumpPage"
  >
    <view class="ui-cell-box">
      <slot name="avatar"></slot>
      <view
        class="ui-cell--left"
        :class="[uicellLeftClass]"
        v-if="$slots.title || title"
        :style="uiCellLeftStyle"
      >
        <view class="ui-cell-title">
          <slot name="title" v-if="$slots.title"></slot>
          <text v-else>{{title}}</text>
        </view>
        <view class="ui-cell-sub-title">
          <slot name="sub-title">{{ label }}</slot>
        </view>
      </view>
      <view class="ui-cell--right" :class="[uiCellRightClass]">
        <view class="ui-cell-value">
          <slot name="value">{{ value }}</slot>
        </view>
        <view class="ui-cell-icon">
          <slot name="righticon" v-if="$slots.righticon"></slot>
          <uiIcon
            type="uni-icon"
            name="ui-icon-arrow"
            v-if="!$slots.righticon && (isLink || clickable)"
            size="28"
          ></uiIcon>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import uiIcon from "@/components/base/icon/index.vue";

import emitterMixin from "@/components/utils/emitter.js";

export default {
  name: "uiCell",
  componentName: "uiCell",
  mixins: [emitterMixin],
  "mp-weixin": {
    externalClasses: ["customclass", "ui-cell-left", "ui-cell--right"],
    options: {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      addGlobalClass: true //  这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。
    }
  },
  // externalClasses: ["custom-class", "ui-cell-left", "ui-cell--right"],
  props: {
    // cell的标题
    title: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    titleWidth: {
      type: String
    },
    clickable: Boolean,
    isLink: Boolean,
    url: String,
    replace: Boolean,
    to: [String, Object],
    customclass: String,
    uicellLeftClass: String,
    uiCellRightClass: String
  },
  components: {
    uiIcon
  },
  computed: {
    root() {
      let parent = this.$parent;
      let componentName = parent.$options.componentName;
      while (parent && componentName !== "uiCellGroup") {
        parent = parent.$parent;
        if (parent && parent.$options) {
          componentName = parent.$options.componentName;
        }
      }
      if (parent && parent.titleWidth) {
        return {
          titleWidth: parent.titleWidth
        };
      } else {
        return;
      }
    },
    titleWidthItem() {
      return this.titleWidth || (this.root && this.root.titleWidth) || "180rpx";
    },
    uiCellLeftStyle() {
      return `width : ${this.titleWidthItem};max-width: ${this.titleWidthItem};min-width: ${this.titleWidthItem};`;
    }
  },
  data() {
    return {};
  },
  methods: {
    jumpPage() {
      if (this.clickable) this.$emit("click");

      if (!this.to) return false;
      uni.navigateTo({
        url: this.to
      });
    }
  }
};
</script>

<style lang="scss" scoped src="@/scss/components/cell.scss">
</style>
